<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* html,body{
            height: 100%;
        } */
        .header {
            height: 150px;
            background-color: #6ff;
        }

        .wrapMenu {
            height: 90px;
        }

        .menu {
            width: 80%;
            height: 90px;
            background-color: #000;
        }

        .content {
            height: 450px;
            border: 1px solid #000;
            line-height: 450px;
            text-align: center;
            overflow: auto;
        }

        .sub {
            height: 1000px;

        }
    </style>
</head>

<body>
    <div class="header">

    </div>
    <div class="wrapMenu">
        <div class="menu">
            123131
        </div>
    </div>
    <div class="content">01
        <!-- <div class="sub"></div> -->
    </div>
    <div class="content">02</div>
    <div class="content">03</div>
    <div class="content">04</div>
    <div class="content">05</div>
    <div class="content">06</div>
    <div class="content">07</div>
    <div class="content">08</div>
    <div class="content">09</div>
    <div class="content">10</div>
</body>
<script>

    var obj = {
        goodsName: "华为",
        goodsPrice: 3900
    }

    // 判断滚动条是否 到达底部

    var menu = document.getElementsByClassName("menu")[0];
    // var content = document.getElementsByClassName("content")[0];
    // content.onscroll = function () {
    //     console.log("content中发生滚动")
    // }

    // 当页面滚动条滚动时触发
    window.onscroll = function () {
        // console.log("滚动条滚动了");
        // document.documentElement   => html
        // document.body   => body

        // document.documentElement, document.body   //

        // 滚动条滚动的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollTop);

        // 文档的实际高度 (不包含滚动条)
        // document.documentElement.scrollHeight||document.body.scrollHeight

        // 文档可视高度   (不包含滚动条)
        // document.documentElement.clientHeight||document.body.clientHeight

        // 窗口的宽高 (可视宽高 + 滚动条16px )
        // window.innerWidth;
        // window.innerWidth;

        // console.log(document.documentElement.scrollTop, document.body.scrollTop);


        if (scrollTop > 150) {
            menu.style.position = "fixed";
            menu.style.left = "0";
            menu.style.top = "0";
        } else {
            menu.style.position = "static";
        }



    }

</script>

</html>